<template>
    <div class="main">
        <div class="banner">
            <img :src="banner" class="ob-cover">
        </div>
        <Content>
            <template #content>
                <div class="con" v-if="JSON.stringify(psData) != '{}'" style="background-color: #fff;">
                    <div class="title"><span class="pointer" style="margin-right: 20px;font-size:20px;font-weight900;color: #9b211a;padding: 20px"
                            @click="back1">返回</span>
                    </div>
                  <div class="dispaly-align-center">
                    <div class="father pointer dispaly-col-center" @click="isShowPs = true">
                      <div class="dispaly-align-center">
                        <div>公亲名字：</div>
                        <div style="color: #9b211a;font-weight: 900">{{fatherName}}</div>
                      </div>
                      <div style="margin-top: 10px">点击查看谱书</div>
                    </div>
                  </div>
                    <div class="data" v-if="isShowPs">
                      <Template :data="psData" v-if="!psData.img"/>
                      <el-image
                          v-else
                          :src="psData.img"
                          :zoom-rate="1.2"
                          :max-scale="7"
                          :min-scale="0.2"
                          :preview-src-list="[psData.img]"
                          :initial-index="4"
                          fit="cover"
                      />
                    </div>
                </div>
                <div class="b-w p-20-30 box" v-else>
                    <el-row class="dispaly-between">
                        <el-col :span="6">
                            <div class="cate">
                                <div :class="{ 'active': state.current == index }" class="item pointer"
                                    @click="clickCate(item, index)" v-for="(item, index) in state.cateList"
                                    :key="index">{{ item.name }}
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="18">
                            <div class="title"><span class="pointer" style="margin-right: 20px;color: #9b211a;"
                                    @click="back">返回</span>{{
                                        state.cateItem.name ?
                                            state.cateItem.name :
                                            state.cateList[0].name
                                    }}
                            </div>

                            <template v-if="state.current == 0">
                                <div class="con">
                                    <div class="input" v-if="!state.zResultData.length">
                                        <div class="item dispaly-center">
                                            <input v-model="state.queryKey" type="text" placeholder="请搜索名字和编号">
                                        </div>
                                        <div class="bottom-btn-box" @click="queryGen">
                                            <div class="bottom-btn pointer dispaly-align-center">
                                                查询
                                            </div>
                                        </div>
                                    </div>
                                    <div class="query-con" v-else>
                                        <div class="query-item pointer dispaly-col-center" @click="lookDetail(item)"
                                            v-for="(item, index) in state.zResultData" :key="index">
                                            <div class="txt" v-if="item.pname">{{ item.pname }}</div>
                                            <div class="txt" v-if="item.pid">{{ item.pid }}</div>
                                            <div class="txt">{{ item.name }}</div>
                                            <div class="txt">{{ item.id }}</div>


                                        </div>
                                    </div>
                                </div>
                            </template>
                            <template v-else>
                                <template v-if="!state.rResultData.length">
                                    <div class="con">
                                        <template v-if="state.rResultOneData.length">
                                            <div class="t">第一位待选名单</div>
                                            <div class="query-con">
                                                <div class="query-item pointer dispaly-col-center"
                                                    @click="clickROneItem(item, index)"
                                                    :class="{ 'ac-b': state.rCurrentOne == index }"
                                                    v-for="(item, index) in state.rResultOneData" :key="index">
                                                    <div class="txt">{{ item.name }}</div>
                                                    <div class="txt">{{ item.number }}</div>
                                                </div>
                                            </div>
                                        </template>
                                        <div class="input" v-if="!state.rResultOneData.length">
                                            <div class="item dispaly-center">
                                                <input v-model="state.oneQueryKey" type="text"
                                                    placeholder="请搜索第一位的名字和编号">
                                            </div>
                                            <div class="bottom-btn-box" @click="rQureyOne">
                                                <div class="bottom-btn pointer dispaly-align-center">
                                                    查询
                                                </div>
                                            </div>
                                        </div>
                                        <template v-if="state.rResultTwoData.length">
                                            <div class="t">第二位待选名单</div>
                                            <div class="query-con">
                                                <div class="query-item pointer dispaly-col-center"
                                                    @click="clickRTwoItem(item, index)"
                                                    :class="{ 'ac-b': state.rCurrentTwo == index }"
                                                    v-for="(item, index) in state.rResultTwoData" :key="index">
                                                    <div class="txt">{{ item.name }}</div>
                                                    <div class="txt">{{ item.number }}</div>
                                                </div>
                                            </div>
                                        </template>
                                        <div class="input"
                                            v-if="state.rResultOneData.length && !state.rResultTwoData.length">
                                            <div class="item dispaly-center">
                                                <input v-model="state.twoQueryKey" type="text"
                                                    placeholder="请搜索第二位的名字和编号">
                                            </div>
                                            <div class="bottom-btn-box" @click="rQureyTwo">
                                                <div class="bottom-btn pointer dispaly-align-center">
                                                    查询
                                                </div>
                                            </div>
                                        </div>

                                        <div class="input"
                                            v-if="state.rResultOneData.length && state.rResultTwoData.length">
                                            <div class="bottom-btn-box" @click="submit">
                                                <div class="bottom-btn pointer dispaly-align-center">
                                                    查询
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </template>
                            </template>
                        </el-col>
                    </el-row>
                </div>

            </template>
        </Content>
        <Pop />
    </div>

</template>

<script setup>
import { reactive, computed, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { nameNumberQuery, rqQuery, psQuery } from '@/api/index/index'
import Template from '@/components/template.vue'
import { useIndexPopStore } from '@/store/modules/indexPop'
import html2canvas from 'html2canvas'
import { download } from '@/util/utils'

// 生成模版
const templateTwo = ref(null)
// onMounted(() => {
//     html2canvas(templateTwo.value, {
//         width: templateTwo.value.offsetWidth,
//         height: templateTwo.value.offsetHeight,
//         scale: 2
//     }).then(function (canvas) {
//         canvas.toBlob((blob) => {
//             if (blob) {
//             download(blob, 'test')
//             } 
//         });
//     })
// })
onMounted(() => {
  if (!localStorage.getItem('token')) {
    indexPopStore.isShowPop = true
    ElMessage({
      message: '请先登录',
      type: 'error',
      plain: true
    })
  }
})

const indexPopStore = useIndexPopStore()
const banner = computed(() => localStorage.getItem('banner'))
const state = reactive({
    cateList: [
        { name: '族谱查询', id: 1 },
        { name: '认亲查询', id: 2 },
    ],
    current: 0,
    cateItem: {},
    queryKey: '', // 族谱查询
    zResultData: [], // 族谱查询结果
    oneQueryKey: '', // 认亲查询第一个
    twoQueryKey: '', // 认亲查询第二个
    rResultOneData: [], // 认亲查询第一次结果
    rResultTwoData: [], // 认亲查询第二次结果
    rCurrentOne: null, // 认亲查询第一次结果 选中下标
    rCurrentTwo: null, // 认亲查询第二次结果 选中下标
    rSelectOneData: null, // 认亲查询第一次选中结果
    rSelectTwoData: null, // 认亲查询第二次选中结果
    rResultData: [], // 认亲查询总结果
})

// 点击分类
const clickCate = (item, index) => {
    state.cateItem = item
    state.current = index
}

// 族谱查询
const queryGen = async () => {
    if (localStorage.getItem('token')) {
        if (state.queryKey) {
            const res = await nameNumberQuery({ keyword: state.queryKey, parent: true })
            if (res.code == 200) {
                state.zResultData = res.data
            }
            if (!state.zResultData.length) {
                ElMessage({
                    message: '未找到结果',
                    type: 'error',
                    plain: true
                })
            }
        } else {
            ElMessage({
                message: '请输入名字和编号',
                type: 'error',
                plain: true
            })
            return
        }
    } else {
        indexPopStore.isShowPop = true
        ElMessage({
            message: '请先登录',
            type: 'error',
            plain: true
        })
        return
    }


}

// 认亲查询第一次
const rQureyOne = async () => {
    if (localStorage.getItem('token')) {
        if (state.oneQueryKey) {
            const res = await nameNumberQuery({ keyword: state.oneQueryKey })
            if (res.code == 200) {
                state.rResultOneData = res.data
            }

            if (!state.rResultOneData.length) {
                ElMessage({
                    message: '未找到结果',
                    type: 'error',
                    plain: true
                })
            }
        } else {
            ElMessage({
                message: '请输入第一位待选名单',
                type: 'error',
                plain: true
            })
            return
        }
    } else {
        indexPopStore.isShowPop = true
        ElMessage({
            message: '请先登录',
            type: 'error',
            plain: true
        })
        return
    }
}

// 认亲查询第二次
const rQureyTwo = async () => {
    if (state.twoQueryKey) {
        const res = await nameNumberQuery({ keyword: state.twoQueryKey })
        if (res.code == 200) {
            state.rResultTwoData = res.data
        }
        if (!state.rResultTwoData.length) {
            ElMessage({
                message: '未找到结果',
                type: 'error',
                plain: true
            })
        }
    } else {
        ElMessage({
            message: '请输入第二位待选名单',
            type: 'error',
            plain: true
        })
        return
    }

}

// 认亲查询第一次结果选中
const clickROneItem = (item, index) => {
    state.rCurrentOne = index
    state.rSelectOneData = item
}

// 认亲查询第二次结果选中
const clickRTwoItem = (item, index) => {
    state.rCurrentTwo = index
    state.rSelectTwoData = item
}

// 认亲查询提交
let fatherName = ref('')
let fData = ref({})
let psData = ref({})
let isShowPs = ref(true)
const submit = async () => {
    if (state.rSelectOneData == null) {
        ElMessage({
            message: '请选择第一位待选',
            type: 'error',
            plain: true
        })
        return
    }
    if (state.rSelectTwoData == null) {
        ElMessage({
            message: '请选择第二位待选',
            type: 'error',
            plain: true
        })
        return
    }
    const res = await rqQuery({ id1: state.rSelectOneData.id, id2: state.rSelectTwoData.id })
    if (res.code == 200) {
        fatherName.value = res.data.name
        fData.value = res.data.entity
        const result = await psQuery(fData.value)
        if (result.code == 200) {
            psData.value = result.data
          isShowPs.value = false
        }
    }
    if (!state.rResultData.length) {
        ElMessage({
            message: res.msg,
            type: 'error',
            plain: true
        })
    }
    state.rResultData = [1]
}

const lookPs = (data) => {

}

// 查看族谱
const router = useRouter()
const lookDetail = (item) => {
    // 携带新的参数打开新页面
    let routeUrl = router.resolve({ path: '/relation', query: { id: item.id } })
    window.open(routeUrl.href, '_blank')
}

// 返回 
const back = () => {
    if (JSON.stringify(state.cateItem) == '{}' || state.cateItem.id == 1) {
        state.zResultData = []
    } else if (state.cateItem.id == 2) {
        state.rResultData = []
        state.rResultOneData = []
        state.rResultTwoData = []
    }
}

const back1 = () => {
    window.location.reload()
}

</script>

<style lang="scss" scoped>
.tem {
    background-color: #fff;
}

.active {
    background-color: $primary-color !important;
    color: #fff !important;
}

.father {
  width: 200px;
  height: 122px;
  background: #EDE7DB;
  border-radius: 5px;
  margin-bottom: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: MicrosoftYaHei;
  font-size: 16px;
  color: #333333;
}

.ac-b {
    border: 2px solid $primary-color !important;
}

.main {

    .banner {
        width: 100%;
        height: 300px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .box {
        // max-height: 600px;
        min-height: 600px;
        position: relative;

        .cate {
            overflow-y: scroll;
            // max-height: $c-height;
            // min-height: $c-height;

            .item:last-child {
                margin-bottom: 0;
            }

            .item:hover {
                color: $primary-color;
            }

            .item {
                padding: 20px 10px;
                background-color: #ece7dc;
                color: #333;
                font-family: MicrosoftYaHei;
                font-size: 22px;
                margin-top: 8px;
            }
        }

        .title {
            font-family: MicrosoftYaHei;
            font-size: 20px;
            color: #000001;
            border-bottom: 2px solid #EDE7DB;
            padding-bottom: 15px;
            margin-left: 40px;
            margin-bottom: 20px;
        }

        .con {
            margin-left: 40px;

            .data {
                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .t {
                font-family: MicrosoftYaHei;
                font-size: 24px;
                color: #000001;
                margin: 30px 0;
            }

            // max-height: 800px;
            // min-height: 800px;
            .query-con {
                display: flex;
                align-items: center;
                flex-wrap: wrap;

                .query-item {
                    margin-right: 10px;
                    width: 200px;
                    height: 122px;
                    background: #EDE7DB;
                    border-radius: 5px;
                    margin-bottom: 10px;
                    box-sizing: border-box;
                    // .txt:hover {
                    //     color: $primary-color;
                    // }

                    .txt {
                        font-family: MicrosoftYaHei;
                        font-size: 16px;
                        color: #333333;
                    }
                }
            }

            .input {
                .bottom-btn-box {
                    margin-top: 20px;
                    margin-left: 13%;

                    .bottom-btn {
                        background: url(../../assets/image/btn-bg.jpg) no-repeat;
                        background-size: cover;
                        width: 420px;
                        height: 62px;
                        color: #fff;
                        font-size: 25px;
                    }
                }

                .item {
                    background: url(../../assets/image/i-b-b.png) no-repeat;
                    background-size: cover;
                    width: 662px;
                    height: 56px;
                    position: relative;
                    margin: 50px 0 60px 0;


                    input::placeholder {
                        color: $primary-color;
                        text-align: center;
                    }

                    input {
                        text-align: center;
                        color: $primary-color;
                        width: 662px;
                        height: 56px;
                    }
                }
            }

            // .empty {
            //     min-height: 800px;
            // }
        }
    }
}

:deep(.is-active) {
    background-color: $primary-color !important;
    border-radius: 50% !important;
    color: #fff !important;
}
</style>